<!-- 
	name: 悬浮菜单
	version: v0.0.1
	update_time: 2022-05-27
 -->
<template>
	<view>
		<!-- 遮罩 -->
		<view class="mask" v-if="show" @tap.stop="hideBox" @touchmove.stop.prevent></view>
		<!-- 按钮 -->
		<view class="major-box" :class="{show: show}" :style="{top: top + 'px' }">
			<view v-if="showMenu" class="click-btn" @tap.stop="showBox" draggable="true" @touchstart="touchstart"
				@touchmove.stop.prevent="touchmove">
				<view>管理中</view>
				<!-- <view>导航</view> -->
			</view>
			<view class="nav-box">
				<view class="nav-btn" v-for="(btn, index) in btnList" :key="index" @tap="clickBtn(btn)">
					<!-- <view class="nav-icon" :style="{backgroundColor: btn.bgcolor}">{{btn.icon}}</view> -->
					<image mode="aspectFill" class="nav-icon" :src="$IMG_URL+btn.icon"></image>
					<view class="nav-text">{{btn.text}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "t-menu",
		data() {
			return {
				show: false, // 是否显示
				showMenu: true,
				top: 500, // 顶端距离 
				deviationTop: 0, // 偏移量
				windowHeight: uni.getSystemInfoSync().windowHeight, // 视图高度 
				btnList: [ // 所有按钮 
					{
						icon: '/imgs/tabbar/tabbar_home1.png',
						text: '首页',
						bgcolor: '#FF9000',
						path: '/pages/index/index'
					},
					{
						icon: '/imgs/tabbar/tabbar_category1.png',
						text: '订单',
						bgcolor: '#FF9000',
						path: '/pages/index/order'
					},
					{
						icon: '/imgs/tabbar/tabbar_cart1.png',
						text: '赚钱',
						bgcolor: '#FF9000',
						path: '/pages/index/share'
					},
					{
						icon: '/imgs/tabbar/tabbar_personal1.png',
						text: '我的',
						bgcolor: '#FF9000',
						path: '/pages/index/user'
					},
					/* {
						icon: '个',
						text: '个人资料',
						bgcolor: '#73B3C7'
					},
					{
						icon: '软',
						text: '关于软件',
						bgcolor: '#66B26A'
					}, */
				]
			};
		},
		methods: {
			showBox() {
				/* this.show = true;
				this.showMenu = false; */
				this.$util.jump('/pages/shop/admin/user-list');
			},
			hideBox() {
				this.show = false;
				this.showMenu = true;
			},
			// 点击按钮 
			clickBtn: function(btn) {
				// console.log('点击了：' + btn.text);
				this.$util.jump(btn.path, 'switchTab')
			},
			// 拖动开始，记录一下偏移量
			touchstart: function(e) {
				var touch = e.touches[0] || e.changedTouches[0];
				this.deviationTop = touch.clientY - this.top;
				// console.log(this.deviationTop);
			},
			// 上下拖动时 
			touchmove: function(e) {
				var touch = e.touches[0] || e.changedTouches[0];
				var top = touch.clientY;
				top = top - this.deviationTop;
				if (top < 0) {
					top = 0;
				}
				if (top > this.windowHeight - 40) {
					top = this.windowHeight - 40;
				}
				this.top = top;
				return false;
			},
		}
	};
</script>

<style>
	/* 遮罩 */
	.mask {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 10000;
		background: rgba(0, 0, 0, 0.4);
	}

	/* 总盒子 */
	.major-box {
		border: 1px 0 solid;
		z-index: 10001;
		position: fixed;
		width: 100%;
		/* height: 0px; */
		left: 650rpx;
		transition: left 0.5s;
		overflow: hidden;
	}

	/* 展开时 */
	/* .major-box.show{left: 110rpx;} */
	.major-box.show {
		left: 560rpx;
	}

	.click-btn,
	.nav-box {
		float: left;
	}

	/* 按钮样式 */
	.nav-box {
		/* background-color: #FFF; */
		background: rgba(255, 255, 255, 1);
		border-radius: 30rpx 0 0 30rpx;
	}

	.click-btn {
		width: 100rpx;
		/* background-color: #fe6d34; */
		background: rgba(255, 144, 0, 1);
		color: #fff;
		font-size: 24rpx;
		text-align: center;
		border-radius: 80rpx 0 0 80rpx;
		line-height: 50rpx;
		padding: 10rpx 0;
	}

	.click-btn view {
		padding-left: 15rpx;
	}

	/* 按钮盒子 */
	.nav-box {
		width: 190rpx;
		/* padding: 30rpx 20rpx 20rpx 20rpx; */
		padding: 10rpx 10rpx 0 10rpx;
		display: flex;
		flex-wrap: wrap;
		text-align: center;
		justify-content: center;
		box-sizing: border-box;
	}

	.nav-btn {
		flex: 1;
		border: 0px #000 solid;
		min-width: 60rpx;
		padding: 0 0 10rpx 0;
		/* padding-bottom: 20rpx; */
	}

	.nav-icon {
		width: 60rpx;
		height: 60rpx;
		/* line-height: 80rpx; */
		/* display: inline-block; */
		/* font-size: 30rpx; */
		border-radius: 50%;
		/* border: 1px solid #ff9000; */
		/* background-color: #666; */
		/* color: #fff; */
	}

	.nav-text {
		color: #ff9000;
		font-size: 20rpx;
		font-weight: bold;
		/* margin-top: 8rpx; */
	}
</style>
